<template>
  <!---搜索表单-->
    <div class="search-div">
        <el-form label-width="70px" size="small">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="操作模块">
                        <el-input v-model="queryDto.keyword" style="width: 95%" placeholder="操作模块"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="操作人">
                        <el-input v-model="queryDto.keyword" style="width: 95%" placeholder="操作人"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间">
                        <el-date-picker v-model="createTimes" type="daterange" range-separator="To"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="display:flex">
                <el-button type="primary" size="small" @click="searchSysOperationLog"> 搜索</el-button>
                <el-button size="small" @click="resetData">重置</el-button>
            </el-row>
        </el-form>
    </div>

    <el-dialog v-model="dialogVisible" title="详情" width="40%">
        <el-form label-width="100px" :model="formData">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="操作模块">
                        {{ formData.title }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="请求地址">
                        {{ formData.operUrl }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="操作人员">
                        {{ formData.operName }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="请求IP">
                        {{ formData.operIp }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="操作方法">
                        {{ formData.requestMethod }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="请求参数">
                        {{ formData.operParam }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="返回参数">
                        {{ formData.jsonResult }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="操作状态">
                        {{ formData.status === 1 ? '失败' : '成功' }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="操作时间">
                        {{ formData.createTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <el-button size="small" @click="dialogVisible = false"> 取消</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>

  <!---数据表格-->
    <el-table :data="list" style="width: 100%" size="default">
        <el-table-column prop="title" label="系统模块" min-width="100px"/>
        <el-table-column prop="requestMethod" label="请求方式"/>
        <el-table-column prop="operName" label="操作人员"/>
        <el-table-column prop="operIp" label="操作ip" min-width="100px"/>
        <el-table-column prop="method" label="请求方法" min-width="400px"/>
        <el-table-column prop="status" label="操作状态" #default="scope">
            <el-tag v-if="scope.row.status === 0" type="success">成功</el-tag>
            <el-tag v-else type="danger">失败</el-tag>
        </el-table-column>
        <el-table-column prop="createTime" label="操作时间" min-width="130px"/>
        <el-table-column label="操作" #default="scope" min-width="60px">
            <el-button type="primary" size="small" @click="showDetail(scope.row)"> 详情</el-button>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageParams.page" v-model:page-size="pageParams.limit"
                   :page-sizes="[5, 10, 20, 50, 100]" @size-change="fetchData" @current-change="fetchData"
                   layout="total, sizes, prev, pager, next" :total="total"/>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {GetSysOperationLogListByPage} from "@/api/sysOperLog";

const dialogVisible = ref(false)
const formData = ref({})
const showDetail = async row => {
    formData.value = row
    dialogVisible.value = true
}

// 表格数据模型
const list = ref([])
// 分页条数据模型
const total = ref(0)
// 定义搜索表单数据模型
const queryDto = ref({
    keyword: '',
    createTimeBegin: '',
    createTimeEnd: '',
})
const createTimes = ref([])

//分页数据
const pageParamsForm = {
    page: 1, // 页码
    limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm)

// onMounted钩子函数
onMounted(() => {
    fetchData()
})

// 搜素按钮点击事件处理函数
const searchSysOperationLog = () => {
    fetchData()
}
// 重置按钮点击事件处理函数
const resetData = () => {
    queryDto.value = {}
    createTimes.value = []
}
// 定义分页查询方法
const fetchData = async () => {
    if (createTimes.value.length === 2) {
        queryDto.value.createTimeBegin = createTimes.value[0]
        queryDto.value.createTimeEnd = createTimes.value[1]
    }
    // 请求后端接口进行分页查询
    const {data} = await GetSysOperationLogListByPage(
        pageParams.value.page,
        pageParams.value.limit,
        queryDto.value)
    list.value = data.list
    total.value = data.total
}


</script>

<style scoped>
.search-div {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
}

</style>